<template>
  <div
    class="table-content noboderB"
    :style="{ height: tableData.options.tableHeight + 'px' }"
  >
    <el-table
      :data="tableData.list"
      border
      fit
      :max-height="tableData.options.tableHeight"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <!-- ref= 'multipleTable' -->
      <!-- 暂无数据提示，自己定义就OK了 -->
      <template slot="empty">
        <div class="empty-box">
          <i class="mh-kym_icon icon"></i>
          <p class="col-66 text-1">
            {{
              tableData.options.errortip != ""
                ? tableData.options.errortip
                : $t("components.tables.normalTableCont.51686onj4rw0")
            }}
          </p>
        </div>
      </template>
      <!-- //表格多选是否存在判断 -->
      <el-table-column
        v-if="tableData.options.mutiSelect && tableData.options.selectDisable"
        type="selection"
        align="center"
        style="width: 55px"
        :selectable="checkboxInit"
        fixed="left"
      ></el-table-column>
      <el-table-column
        v-else-if="tableData.options.mutiSelect"
        type="selection"
        align="center"
        style="width: 55px"
        fixed="left"
      ></el-table-column>
      <!-- 表格数据渲染 -->
      <template v-for="(column, $index) in tableData.columns">
        <!-- 固定列 -->
        <template
          v-if="$index == IndexId || $index == IndexIdTwo || $index == 0"
        >
          <el-table-column
            :prop="column.fieldstring"
            :key="$index"
            fixed="left"
            :sortable="column.sortable"
            :label="column.fieldname"
            align="center"
            :min-width="column.width ? column.width : '150px'"
            :show-overflow-tooltip="true"
            v-if="column.show == '1'"
          >
            <template slot-scope="scope">
              <el-button
                v-if="column.ismethod"
                type="text"
                class="link-type"
                @click="handleColumnChange(scope.$index, column, scope.row)"
                >{{
                  tableData.list[scope.$index][column.fieldstring]
                }}</el-button
              >
              <template v-else-if="column.istag == 1">
                <template
                  v-if="
                    tableData.list[scope.$index][column.fieldstring].length > 0
                  "
                >
                  <el-tag
                    class="mr5"
                    v-for="(item, index) in tableData.list[scope.$index][
                      column.fieldstring
                    ]"
                    :key="index"
                    >{{ item }}</el-tag
                  >
                </template>
                <template v-else>--</template>
              </template>
              <span v-else type="text">{{
                tableData.list[scope.$index][column.fieldstring]
              }}</span>
            </template>
          </el-table-column>
        </template>
        <!-- 一般列 -->
        <template v-else>
          <el-table-column
            :prop="column.fieldstring"
            :key="$index"
            :label="column.fieldname"
            :sortable="column.sortable"
            align="center"
            :min-width="column.width ? column.width : '150px'"
            :show-overflow-tooltip="true"
            v-if="column.show == '1'"
          >
            <template slot-scope="scope">
              <el-button
                v-if="column.ismethod"
                type="text"
                class="link-type"
                @click="handleColumnChange(scope.$index, column, scope.row)"
                >{{
                  tableData.list[scope.$index][column.fieldstring]
                }}</el-button
              >
              <div v-else-if="column.companyRender">
                <!-- <div v-if="typeof tableData.list[scope.$index][column.fieldstring] != ''"> -->
                <div
                  v-for="(item, index) in tableData.list[scope.$index][
                    column.fieldstring
                  ]"
                  :key="index"
                >
                  {{ item.companies_cnname }}
                </div>
                <!-- </div>
                <div v-else>{{ tableData.list[scope.$index][column.fieldstring] }}</div> -->
              </div>
              <div v-else-if="column.discount == 1">
                <!-- 优惠政策管理 - 列表 优惠折扣 -->
                <template
                  v-if="tableData.list[scope.$index][column.fieldstring]"
                >
                  <div
                    v-for="(dItem, dIndex) in tableData.list[scope.$index][
                      column.fieldstring
                    ]"
                    :key="dIndex"
                  >
                    <span>{{ dItem.content }}</span>
                  </div>
                </template>
                <template v-else>--</template>
              </div>
              <span
                v-else-if="column.orderStatus == 1"
                type="text"
                :class="{
                  'color-blue': tableData.list[scope.$index].order_status != 2,
                }"
                >{{ tableData.list[scope.$index][column.fieldstring] }}</span
              >
              <div v-else-if="column.policyPrice == 1" type="text">
                <p>{{ tableData.list[scope.$index][column.fieldstring] }}</p>
                <p
                  class="policy-price"
                  v-if="tableData.list[scope.$index].order_policyprice != 0"
                >
                  <span>优惠抵扣</span
                  >{{ tableData.list[scope.$index].order_policyprice }}
                </p>
              </div>
              <div v-else-if="column.realPirceVisible == 1" type="text">
                <p>{{ tableData.list[scope.$index][column.fieldstring] }}</p>
                <p
                  class="policy-price"
                  v-if="tableData.list[scope.$index].out_price != 0"
                >
                  <span>意外退款</span
                  >{{ tableData.list[scope.$index].out_price }}
                </p>
              </div>
              <template v-else-if="column.istag == 1">
                <template
                  v-if="
                    tableData.list[scope.$index][column.fieldstring].length > 0
                  "
                >
                  <el-tag
                    class="mr5"
                    v-for="(item, index) in tableData.list[scope.$index][
                      column.fieldstring
                    ]"
                    :key="index"
                    >
                    <span v-if="item != ''">{{ item }}</span>
                    <!-- <span v-else> -- </span> -->
                    </el-tag
                  >
                </template>
                <template v-else> -- </template>
              </template>
              <template v-else-if="column.isswitch=='1'">
                <el-switch
                @change="switchChange(scope.row, scope.$index,scope.column)"
                active-value="1"
                inactive-value="0"
                active-color="#F78F0E"
                v-if="column.isswitch=='1'"
                v-model="tableData.list[scope.$index][column.fieldstring]"
              ></el-switch>
              <el-switch
                @change="switchChange(scope.row, scope.$index,scope.column)"
                active-value="0"
                inactive-value="0"
                active-color="#F78F0E"
                v-else-if="column.switchVisible"
                v-model="tableData.list[scope.$index][column.fieldstring]"
              ></el-switch>
              </template>
              <span v-else type="text">{{
                tableData.list[scope.$index][column.fieldstring]
              }}</span>
            </template>
          </el-table-column>
        </template>
      </template>
      <!-- 操作列 -->
      <slot></slot>
      <!-- 编辑列 -->
      <el-table-column
        fixed="right"
        label
        align="center"
        width="40px"
        v-if="tableData.options.issetting"
        :render-header="renderHeader"
      ></el-table-column>
    </el-table>
    <!-- 穿梭框 -->
    <el-dialog
      :title="$t('components.tables.normalTableCont.51686onj6kc0')"
      class="setting-box"
      :visible.sync="dialogVisible"
      width="500px"
    >
      <el-transfer
        v-model="oprateColumn"
        :data="data"
        :titles="[
          $t('components.tables.normalTableCont.51686onj77w0'),
          $t('components.tables.normalTableCont.51686onj7n40'),
        ]"
      ></el-transfer>
      <div class="oprate">
        <el-button size="small" type="primary" @click="handSetting()">{{
          $t("components.tables.normalTableCont.51686onj8180")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "normalTableCont",
  props: {
    // 表格数据所有参数
    tableData: {
      type: Object,
    },
    checkKey: {
      type: String,
    },
  },
  data() {
    return {
      dialogVisible: false,
      showColumns: [],
      data: [],
      oprateColumn: [], //编辑列
      IndexId: -1, //固定的列数
      IndexIdTwo: -1, //固定的列数
      isCheckedFlag:false
    };
  },
  created() {
    this.getColums();
  },
  watch: {
    getIndex(n) {
      var i = 0;
      var _index = 0,
        _index_two = 0;
      if (n.length >= 8) {
        n.forEach((item, index) => {
          if (item.show == "1" && i == 0) {
            i++;
            _index = index;
          } else if (item.show == "1" && i == 1) {
            i++;
            _index_two = index;
          }
        });
        this.IndexId = _index;
        this.IndexIdTwo = _index_two;
      }
      // 编辑列操作
      if (this.tableData.options.issetting) {
        var fieldColumns = n;
        if (
          !this.$Tool.getStorage("module" + [this.tableData.options.moduleName])
        ) {
          this.$Tool.setStorage(
            "module" + [this.tableData.options.moduleName],
            {}
          );
        }
        var obj = this.$Tool.getStorage(
          "module" + [this.tableData.options.moduleName]
        );
        obj["all_" + [this.tableData.options.ColumnName]] = n;
        // obj["show_" + [this.tableData.options.ColumnName]] = n;
        this.$Tool.setStorage(
          "module" + [this.tableData.options.moduleName],
          obj
        );
        if (obj["show_" + [this.tableData.options.ColumnName]]) {
          fieldColumns = obj["show_" + [this.tableData.options.ColumnName]];
        }
        // 自定义编辑列
        var settingOprateData = this.$Common.settingOprateData(fieldColumns);
        this.data = settingOprateData.data;
        this.oprateColumn = settingOprateData.oprateColumn;
      }
    },
  },
  computed: {
    getIndex() {
      return this.tableData.columns;
    },
  },
  updated(){
    // this.defaultCheckedRow();
  },
  methods: {
    getColums() {
      var i = 0;
      var _index = 0,
        _index_two = 0;
      if (this.tableData.columns.length >= 8) {
        this.tableData.columns.forEach((item, index) => {
          if (item.show == "1" && i == 0) {
            i++;
            _index = index;
          } else if (item.show == "1" && i == 1) {
            i++;
            _index_two = index;
          }
        });
        this.IndexId = _index;
        this.IndexIdTwo = _index_two;
      }
    },
    // 复选框控制权限
    checkboxInit(row) {
      if (this.checkKey === "discountPolicyAudit") {
        if (row.applystudent_status == 1) return 1;
        else return 0; //可勾选
      } else if (this.checkKey === "chargeItemAudit") {
        if (row.fee_auditstatus == 0) return 1;
        else return 0; //可勾选
      } else {
        return 0; //不可勾选
      }
    },
    // 编辑列渲染
    renderHeader(h) {
      return h("i", {
        class: "mh-jtsz btn-setting",
        on: {
          click: () => {
            this.dialogVisible = true;
          },
        },
      });
    },
    // 表格内容绑定事件
    handleColumnChange(k, v, column) {
      this.$emit("handleColumnChange", k, v, column);
    },
    handleSelectionChange(val) {
      this.$emit("handleSelectionChange", val);
    },
    // 编辑列提交
    handSetting() {
      let obj = this.$Tool.getStorage(
        "module" + [this.tableData.options.moduleName]
      );
      let allnum = obj["all_" + [this.tableData.options.ColumnName]];
      allnum.forEach((item, index) => {
        allnum[parseInt(index)].show = "1";
      });
      this.oprateColumn.forEach((item) => {
        allnum[parseInt(item)].show = "0";
      });
      this.showColumns = allnum;
      obj["show_" + [this.tableData.options.ColumnName]] = this.showColumns;
      this.$Tool.setStorage(
        "module" + [this.tableData.options.moduleName],
        obj
      );
      this.$emit("handSetting", this.showColumns);
      this.dialogVisible = false;
    },
    switchChange(v1, v2,v3) {
      this.$emit("switchChange", v1, v2,v3);
    },
    //默认开启
    // defaultCheckedRow(){
    //   if(this.tableData.list > 0) this.isCheckedFlag = true
    //   if (this.tableData.list.length) {
    //     this.$nextTick(function() {
    //       this.tableData.list.forEach(item => {   	
    //           if (item.is_Check) { 
    //           this.$refs.multipleTable.toggleRowSelection(item, true);
    //         }
    //       })
    //     })
    //   }
    // }
  },
};
</script>
<style lang="less" scoped>
.btn-setting {
  display: block;
  width: 20px;
  height: 20px;
  font-size: 16px;
  margin: 0 auto;
  color: #aaa;
  // background-color: green;
  cursor: pointer;
}
.table-content {
  .policy-price {
    color: #ea3729;
    span {
      font-size: 11px;
      background: #f9e6e0;
      margin-right: 2px;
      padding: 1px 4px;
    }
  }
}
</style>
